<template>
	<base-popselect
		:model-value="todayEndTime"
		:options="dateSelects"
		size="small"
		@update:model-value="setSelectDay"
		itemClass=" px-2">
		<div class="px-[10px]">
			{{
				selectedValue.day?.[0]
					? $t((selectedValue.day?.[0] || '') + ' ' + $t(selectedValue.name))
					: $t(selectedValue?.name)
			}}
		</div>
	</base-popselect>
</template>

<script lang="ts" setup>
import { ref, watch, computed } from 'vue'
import { t } from '@/utils'
import { BasePopselect } from '@/components/base'
import { useActivityDateTimes } from '@/hooks/useActivityDateTimes'

const props = defineProps({
	selectDay: {
		type: String,
		default: ''
	},
	updateTime: {
		type: Number,
		default: 0
	}
})

const emit = defineEmits(['update:modelValue', 'select'])

const { dateSelects, todayEndTime }: any = useActivityDateTimes()
const tamp = ref(props.selectDay)
const showPopover = ref(false)

const selectedValue: any = computed(() => {
	return Object.values(dateSelects).find((val: any) => {
		return val.id === tamp.value
	})
})

const handleSelect = (date: any) => {
	tamp.value = date.id
	showPopover.value = false
	dateName.value = t(date.name, date.day)
	emit('select', date)
}

const dateName = ref('')
const setSelectDay = (val: any) => {
	const date = dateSelects.find((item: any) => item.id === val)
	if (date) {
		handleSelect(date)
	}
}

watch(
	() => props.updateTime,
	() => {
		setSelectDay(props.selectDay)
	}
)
</script>
<style lang="scss" scoped></style>
